<!-- 
    传入的参数：
      currLabelValue: 当前导航栏指定的页面值
    内容事件:
      removeTab: 删除导航栏页面
      interLabel: 跳转导航栏页面
    字父通信
      currLabelEmits：改变当前导航栏指定的页面值
-->

<template>
  <div class="labelList_content">
    <el-tabs v-model="props.currLabelValue" type="card" class="demo-tabs" editable @tab-remove="removeTab"
      @tab-click="interLabel">

      <el-tab-pane v-for="item in labelListArr" :key="item.name" :label="item.title" :name="item.name">
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup lang="ts">
import { useCommonStore } from "@/stores/common";
let { labelList, saveLabelList, currLabel, saveCurrLabel } = useCommonStore();
const labelListArr = ref<any>(labelList);
const router = useRouter();
const props = defineProps({
  currLabelValue: {
    type: String,
    default() {
      return ""
    }
  }
})
// emits
const emits = defineEmits("currLabelEmits");
// 编辑导航栏移除
const removeTab = (targetName: string) => {
  if (labelListArr.value.length > 1) {
    let currIndex = 0, currPath = "";
    labelListArr.value.forEach((tab:any, index:number) => {
      if (tab.name === targetName) {
        currIndex = index;
        emits("currLabelEmits", {
          name: index > 0 ? labelListArr.value[index - 1].name : labelListArr.value[1].name,
          openeds: index > 0 ? labelListArr.value[index - 1].openeds : labelListArr.value[1].openeds,
          active: index > 0 ? labelListArr.value[index - 1].active : labelListArr.value[1].active
        })
        currPath = index > 0 ? labelListArr.value[index - 1].path : labelListArr.value[1].path;
      }
    });
    labelListArr.value.splice(currIndex, 1);
    saveLabelList(labelListArr);
    saveCurrLabel(props.currLabelValue);
    router.replace(currPath);
  }
}
// 点击跳转
const interLabel = (TabsPaneContext: any) => {
  if (TabsPaneContext.paneName != currLabel) {
    saveCurrLabel(TabsPaneContext.paneName);
    emits("currLabelEmits", {
      name: TabsPaneContext.paneName,
      openeds: labelListArr.value[TabsPaneContext.index].openeds,
      active: labelListArr.value[TabsPaneContext.index].active
    })
    router.push(`/${TabsPaneContext.paneName}`);
  }
}
</script>

<style scoped lang="scss">
.labelList_content {
  width: 100%;
}
</style>
